<template>
  <div class="phone-manage">
    <page-title>课程订阅列表</page-title>
    <div class="content-box">
      <div class="search-box clear-both">
        <!-- <el-input class="input"
                  v-model="searchForm.inputValue"
                  placeholder="请输入搜索内容"></el-input> -->
         
        <!-- <el-button type="primary">搜 索</el-button> -->
        <el-button type="primary"
                   icon="el-icon-plus"
                   class="float-right"
                   @click="openDialog('add')">添 加</el-button>
      </div>
      <div class="main-table">
        <el-table ref="multipleTable"
                  border
                  height="65vh"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%">
            <el-table-column label="订阅课程封面" width="150">
                <template slot-scope="scope">
                    <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.img_url"
                    fit="contain"></el-image>
                </template>
            </el-table-column>      
            <el-table-column prop="title" 
                            label="订阅课程标题">
            </el-table-column>  
            <el-table-column prop="desc"
                            label="订阅课程描述">
            </el-table-column>    
            <el-table-column prop="play_num" 
                            label="订阅数">        
            </el-table-column>   
            <el-table-column prop="sys_play_num" 
                            label="自增订阅数">        
            </el-table-column>   
            <el-table-column prop="created_at" 
                            label="创建时间">        
            </el-table-column>   
            <!-- <el-table-column prop="type"
                            label="商品类型">
                <template slot-scope="scope">
                    {{scope.row.type==1?'普通商品':'课程视频'}} 
                </template>    
            </el-table-column>  -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.row)"
                                type="text"
                                size="small">
                        删除
                    </el-button>
                    <el-button @click.native.prevent="openDialog('edit',scope.row)"
                                type="text"
                                size="small">
                        查看编辑
                    </el-button>
                </template>
          </el-table-column>
        </el-table>
        <!-- <div style="margin-top: 20px">
          <el-button @click="batchDelete()">批量删除</el-button>
        </div> -->
        <div class="text-center"
             style="margin-top:20px;">
          <el-pagination background
                         layout="prev, pager, next"
                         :total="countNum"
                         @current-change="changeListPage">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 课程订阅信息 -->
    <el-dialog title="课程订阅信息"
               :visible.sync="addArtDialog"
               width="70%"
               :center="true"
               :close-on-click-modal="false"
               class="dialog-box">
      <div class="upload-content">

        <div class="clear-both">
            <div class="float-left"
                style="width:50%">
                <div class="gourp clear-both">
                    <p class="float-left group-left">标题：</p>
                    <div class="float-left group-right">
                        <el-input v-model="uploadForm.title"
                                placeholder="请输入长标题"
                                type="textarea"
                                class="input"></el-input>
                    </div>
                </div>
                <div class="gourp clear-both">
                    <p class="float-left group-left">描述：</p>
                    <div class="float-left group-right">
                        <el-input v-model="uploadForm.desc"
                                placeholder="请输入商品描述"
                                class="input"
                                :rows="4"
                                type="textarea"></el-input>
                    </div>
                </div>  
            </div>
            <div class="float-left"
                style="width:50%">
                <div class="gourp clear-both">
                    <p class="float-left group-left">自增销量：</p>
                    <div class="float-left group-right">
                        <el-input v-model="uploadForm.sys_play_num"
                                placeholder="请输入自增销量"
                                type="number"
                                class="input"></el-input>
                    </div>
                </div> 
                <div class="gourp clear-both">
                    <p class="float-left group-left">商品主图：</p>
                    <div class="float-left group-right">
                        <update-img :imgUrl="uploadForm.img_url"
                                    @change="((e)=>{bannerPicChange(e)})"
                                    @clearImg="((e)=>{clearBannerPic()})"></update-img>
                    </div>
                </div>  
            </div> 
            <div class="gourp clear-both">
                <div class="group-left">商品详情：</div>
                <editor-txt width="100%"
                            :content="uploadForm.content"
                            @change="changeEditor" />
            </div>
        </div>

      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addArtDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="addArtSub">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
    
<script>
import * as api from "./../../api/api";
import { OSS_RUL_BUCKET } from "./../../config";
export default {
  data () {
    return {
        searchForm: {
            inputValue: '',
            goodsType:0,
        },
        openType: 'add',
        options: [{
          value: 0,
          label: '全部'
        },{
          value: 1,
          label: '普通商品'
        },{
          value: 2,
          label: '课程视频'
        }],
        pageNum: 1,
        pageSize: 20,
        countNum: 0, 
        tableData: [],
        typeDataList: [ ],
        typeId: '',
        //上传商品
        addArtDialog: false, 
        uploadForm: { 
            title:'',  //课程订阅标题
            content:'',  //富文本
            desc:'',  //描述
            img_url:'',
            sys_play_num:'', //自增数量
            type:1,  //1直播  2未知
        }
    };
  },

    mounted () {
        this.getGoodsData(); 
    },

    methods: {  
        //banner
        bannerPicChange(e){
            this.uploadForm.img_url = e;
        }, 
        //清除banner
        clearBannerPic(index){
            this.uploadForm.img_url = '';
        },
        changeEditor (html) {
            this.uploadForm.content = html;
        },
        clearForm () {
            this.typeId = '';
            this.uploadForm = {
                title:'',
                content:'',
                desc:'',
                img_url:'',
                sys_play_num:'',
                type:1,  //1直播  2未知
            }
        },
        openDialog (val, item) { 
            this.openType = val;
            this.addArtDialog = true;
            if (val == 'edit') {
                this.typeId = item.level;
                this.uploadForm = item; 
            } else {
                this.clearForm();
            }
        },
        //课程订阅列表
        getGoodsData () {
            let vm = this;
            api.fetchSectionList({ page: vm.pageNum, pageSize: vm.pageSize,type: vm.searchForm.goodsType }).then(res => {
                if (res.data.code == 200) {
                    let resData = res.data.data;
                    vm.countNum = resData.count;
                    vm.tableData = resData.data ? resData.data : []; 
                }
            });  
        },
        changeListPage (e) {
            this.pageNum = e;
            this.getGoodsData();
        }, 
        //选择服务类型
        handleChange (e) {
            this.uploadForm.level = e;
            this.uploadForm.category_id = e[1];
        
        },
        //保存
        addArtSub () {
            let vm = this; 
            if (this.openType == 'add') {  
                api.addSectionItem(vm.uploadForm).then(res => {
                    if (res.data.code == 200) {
                        this.addArtDialog = false;
                        this.getGoodsData();
                    }
                })
            } else {   
                let body = {
                    id: vm.uploadForm.id,
                    data: { 
                        title: vm.uploadForm.title,
                        content: vm.uploadForm.content,
                        desc: vm.uploadForm.desc,
                        img_url: vm.uploadForm.img_url,
                        sys_play_num: vm.uploadForm.sys_play_num,
                    }
                }
            api.editSection(body).then(res => {
            if (res.data.code == 200) {
                vm.addArtDialog = false;
                vm.getGoodsData();
            }
            });
        }
        },
        //删除列表
        deleteRow (item) {
          this.$confirm(`确定删除 ${item.title} ?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            api.deleteSection(item.id).then(res => {
              if (res.data.code == 200) {
                this.getGoodsData();
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
            });
          })
        },
        changeGoodsType(e){
            this.getGoodsData();
        },
    }
};
</script>

<style lang="scss" scoped>
.phone-manage {
  .search-box {
    .input {
      width: 200px;
      margin-right: 20px;
    }
  }
  .main-table {
    width: 100%;
    height: 100%;
    padding: 20px 0;
  }
  .dialog-box {
    .upload-content {
      width: 100%;
      height: 100%;
      .gourp {
        margin-bottom: 20px;
        .group-left {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: right;
          margin-right: 15px;
        }
        .group-right {
          .input {
            width: 200px;
          }
        }
        .radio-box {
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }
}
</style>
